<template>
    <div class="app-container">

        <div class="four-box">
            <div v-for="(item, index) in tablist" :key="index" class="four-item">
                <img class="four-img" :src="item.imgurl" alt="">
                <div class="four-cont">
                    <div class="four-tt">
                        <span class="big1">{{ item.price }}</span>
                        <span v-if="item.showtext" class="big2">{{ item.text }}</span>
                        <span>元</span>
                    </div>
                    <div class="four-dd">
                        {{ item.title }}
                    </div>
                </div>
            </div>
        </div>

        <el-tabs @change="tabsChange" v-model="activeName">
            <el-tab-pane label="订单记录" name="first">
                <el-form class="search-form" :model="orderdata.queryParams" ref="firstRef" :inline="true"
                    label-width="68px">
                    <el-form-item label="订单号" prop="orderNo">
                        <el-input class="search-vitem" v-model="orderdata.queryParams.orderNo" placeholder="订单号" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <!-- <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="Download" @click="handleExport"
                            v-hasPermi="['system:loan:export']">导出</el-button>
                    </el-col>
                </el-row> -->

                <el-table v-loading="orderdata.loading" :data="orderdata.list">
                    <el-table-column fixed="left" label="订单号" width="180" align="center" prop="orderNo" />
                    <el-table-column label="借款人" align="center" prop="borrowerName" />
                    <el-table-column label="借款金额" align="center" prop="number">
                        <template #default="scope">
                            <span>{{ scope.row.number }}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="借款天/期数" width="150" align="center" prop="borrowDays">
                        <template #default="scope">
                            <span>{{ scope.row.borrowDays }}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="收款金额" width="150" align="center" prop="payTotalAmount">
                        <template #default="scope">
                            <span>{{ scope.row.payAmount }}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态" align="center" prop="status">
                        <template #default="scope">
                            <span v-if="scope.row.status == 0">未提交</span>
                            <span v-if="scope.row.status == 1">签署中</span>
                            <span v-if="scope.row.status == 2">风控审核中</span>
                            <span v-if="scope.row.status == 3">风控驳回</span>
                            <span v-if="scope.row.status == 4">待放款</span>
                            <span v-if="scope.row.status == 5">放款中</span>
                            <span v-if="scope.row.status == 6">已完成</span>
                            <span v-if="scope.row.status == 7">待债转</span>
                            <span v-if="scope.row.status == 8">债转中</span>
                            <span v-if="scope.row.status == 9">已取消</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域" align="center" prop="signCity">
                        <template #default="scope">
                            <span>{{ scope.row.signProvince }}{{ scope.row.signCity }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="助贷机构" align="center" prop="corporationName" /> -->
                    <el-table-column label="小贷机构" align="center" prop="orgName" />
                    <el-table-column label="签署方式" width="150" align="center" prop="contractType">
                        <template #default="scope">
                            <span v-if="scope.row.contractType == 1">在线</span>
                            <span v-if="scope.row.contractType == 2">线下</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="进件终端" align="center" prop="relationName" /> -->
                    <!-- <el-table-column label="操作人" width="100" align="center" prop="relationTel" /> -->
                    <el-table-column label="产品类型" align="center" prop="productType">
                        <template #default="scope">
                            <span>{{ objectFun(scope.row.productType, productTypeArr, 'dictValue', 'dictLabel') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="申请时间" align="center" prop="createDate" />
                    <el-table-column label="放款完成时间" width="150" align="center" prop="updateDate" />
                    <el-table-column label="操作" align="center" width="120" fixed="right"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:loan:edit']">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="orderdata.total > 0" :total="orderdata.total" :page="orderdata.queryParams.pageNum"
                    :limit="orderdata.queryParams.pageSize" @pagination="getorderList" />
            </el-tab-pane>
            <el-tab-pane label="放款记录" name="second">
                <el-form class="search-form" :model="paydata.queryParams" ref="secondRef" :inline="true" label-width="68px">
                    <el-form-item label="订单号" prop="orderNo">
                        <el-input class="search-vitem" v-model="paydata.queryParams.orderNo" placeholder="订单号" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>

                <!-- <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="warning" plain icon="Download" @click="handleExport"
                            v-hasPermi="['system:loan:export']">导出</el-button>
                    </el-col>
                </el-row> -->

                <el-table v-loading="paydata.loading" :data="paydata.list">
                    <el-table-column fixed="left" label="订单号" width="180" align="center" prop="orderNo" />
                    <el-table-column label="借款人" align="center" prop="borrowerName" />
                    <el-table-column label="借款金额" align="center" prop="number">
                        <template #default="scope">
                            <span>{{ scope.row.number }}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="借款天/期数" width="150" align="center" prop="borrowDays">
                        <template #default="scope">
                            <span>{{ scope.row.borrowDays }}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="收款金额" width="150" align="center" prop="payAmount">
                        <template #default="scope">
                            <span>{{ scope.row.payAmount }}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="收款人" align="center" prop="cardAccount" />
                    <el-table-column label="产品类型" align="center" prop="productType">
                        <template #default="scope">
                            <span>{{ objectFun(scope.row.productType, productTypeArr, 'dictValue', 'dictLabel') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="区域" align="center" prop="signCity">
                        <template #default="scope">
                            <span>{{ scope.row.signProvince }}{{ scope.row.signCity }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="小贷机构" align="center" prop="orgName" />

                    <!-- <el-table-column label="助贷机构" align="center" prop="corporationTel" /> -->
                    <el-table-column label="受让机构" align="center" prop="relationName" />
                    <el-table-column label="收款银行" width="100" align="center" prop="relationTel" />
                    <el-table-column label="收款卡号" align="center" prop="cardNo" />
                    <el-table-column label="流水号" align="center" prop="relationName" />
                    <el-table-column label="业务模式" width="150" align="center" prop="relationName" />

                    <el-table-column label="收款时间" width="150" align="center" prop="createDate" />
                    <el-table-column label="签署方式" width="150" align="center" prop="contractType">
                        <template #default="scope">
                            <span v-if="scope.row.contractType == 1">在线</span>
                            <span v-if="scope.row.contractType == 2">线下</span>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column label="进件终端" width="150" align="center" prop="relationName" />
                    <el-table-column label="操作人" width="150" align="center" prop="relationName" /> -->

                    <el-table-column label="操作" align="center" width="120" fixed="right"
                        class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-link v-if="scope.row.payFile" type="danger" :href="scope.row.payFile"
                                target="_blank">放款凭证</el-link>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="paydata.total > 0" :total="paydata.total" v-model:page="paydata.queryParams.pageNum"
                    v-model:limit="paydata.queryParams.pageSize" @pagination="getOrderPayList" />


            </el-tab-pane>
        </el-tabs>




        <!-- 弹出层 -->
        <el-dialog title="信息" v-model="open" width="1100px" append-to-body>
            <div class="dialog-custom">



                <div class="dialog-main">
                    <el-form ref="materialsRef" :inline="true" :model="form" label-width="140px">
                        <!-- 申请信息 -->
                        <div class="dialog-item">
                            <div class="dialog-tbox">
                                <span>登记信息</span>
                            </div>
                            <div class="dialog-cont">

                                <el-form-item class="search-fitem v50" label="签署方式" prop="contractType">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="借款人类型" prop="borrowerType">
                                    <div class="search-vitem v100">
                                        <span v-if="form.orderBaseDTO.borrowerType == 1">在线</span>
                                        <span v-if="form.orderBaseDTO.borrowerType == 2">线下</span>
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="证件类型" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        <span v-if="form.orderBaseDTO.borrowerType == 1">在线</span>
                                        <span v-if="form.orderBaseDTO.borrowerType == 2">线下</span>
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="主借人" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="性别" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="民族" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="出生年月" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="婚姻状况" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="手机号码" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>
                                <el-form-item class="search-fitem v50" label="证件号码" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>
                                <el-form-item class="search-fitem v50" label="身份证地址" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>
                                <el-form-item class="search-fitem v50" label="证件起始日期" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>
                                <el-form-item class="search-fitem v50" label="所在地区" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        {{ form.orderBaseDTO.contractType }}
                                    </div>
                                </el-form-item>



                            </div>
                        </div>

                        <!-- 借款信息 -->
                        <div class="dialog-item">
                            <div class="dialog-tbox">
                                <span>借款信息</span>
                            </div>
                            <div class="dialog-cont">

                                <el-form-item class="search-fitem v50" label="订单号" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="借款金额" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="借款用途" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        深圳市中旺锦盛贸易有限公司（雄佳韬）
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="借款天数" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="借款起始日期" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="还款方式" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="借款年利率" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="解决争议方式" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="签约地" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>
                                <el-form-item class="search-fitem v50" label="借款合同编号" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>
                                <el-form-item class="search-fitem v50" label="抵押合同编号" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="" prop="establishmentDate">
                                    <el-button>预约还款计划</el-button>
                                </el-form-item>




                            </div>
                        </div>

                        <!-- 受让方信息 -->
                        <div class="dialog-item">
                            <div class="dialog-tbox">
                                <span>受让方信息</span>
                            </div>
                            <div class="dialog-cont">

                                <el-form-item class="search-fitem v50" label="受让方" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="小贷机构" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>


                                <el-form-item class="search-fitem v50" label="支付渠道" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        深圳市中旺锦盛贸易有限公司（雄佳韬）
                                    </div>
                                </el-form-item>

                                <el-form-item class="search-fitem v50" label="产品类型" prop="establishmentDate">
                                    <div class="search-vitem v100">
                                        元/套
                                    </div>
                                </el-form-item>






                            </div>
                        </div>

                        <!-- 材料信息 -->
                        <div class="dialog-item">
                            <div class="dialog-tbox">
                                <span>放款制单</span>
                                <span style="color: rgb(170, 170, 170); padding-left: 10px;font-size: 14px;">
                                    <span>单笔限额 <b>500万</b></span>
                                    <span style="padding: 0 10px;">|</span>
                                    <span>单日限额 <b>3千万</b></span>
                                    <span style="padding: 0 10px;">|</span>
                                    <span>单月限额 <b>9亿</b></span>
                                </span>
                            </div>
                            <div class="dialog-cont">

                                <el-table :data="payList" border style="width: 100%">
                                    <el-table-column prop="date" label="序号">
                                    </el-table-column>
                                    <el-table-column prop="name" label="制单金额(元)">
                                    </el-table-column>
                                    <el-table-column prop="address" label="收款卡号">
                                    </el-table-column>
                                    <el-table-column prop="address" label="状态">
                                    </el-table-column>
                                    <el-table-column prop="address" label="失败原因">
                                    </el-table-column>
                                    <el-table-column prop="address" label="操作">
                                    </el-table-column>

                                </el-table>

                                <div>
                                    <div class="vtip">
                                        <el-icon>
                                            <Warning />
                                        </el-icon>
                                        <span>请查看放款失败原因，可点击“退回金额”退回放款资金</span>
                                    </div>
                                    <div class="vtip">
                                        <el-icon>
                                            <Warning />
                                        </el-icon>
                                        <span>如需变更收款卡收款，请通过 新增收款卡 - 更换收款卡 - 重新发起放款</span>
                                    </div>
                                </div>


                            </div>
                        </div>


                        <div class="dialog-item">
                            <div class="dialog-tbox">
                                <span>审批信息</span>
                            </div>
                            <div class="dialog-cont">
                                <div class="step">
                                    <div class="step-item">
                                        <div class="content">
                                            <div>操作人：管理员</div>
                                            <div>备注：无</div>
                                            <div>2022-09-27 16:12:42</div><!----><!---->
                                        </div>
                                        <div class="bottom">
                                            <div class="text">驳回</div>
                                            <div class="round"></div>
                                            <div class="line"></div>
                                        </div>
                                    </div>
                                    <div class="step-item">
                                        <div class="content">
                                            <div>操作人：szzwjs_zd_admin</div>
                                            <div>备注：无</div>
                                            <div>2022-09-26 17:50:03</div><!----><!---->
                                        </div>
                                        <div class="bottom">
                                            <div class="text">待审核</div>
                                            <div class="round"></div>
                                            <div class="line"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>




                    </el-form>
                </div>




            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel()">关 闭</el-button>
                </div>
            </template>
        </el-dialog>





    </div>
</template>

<script setup name="loan">
import { OrderPayList, orderList, orderDetail, objectFun, publicList } from "@/api/user/order";

const { proxy } = getCurrentInstance();

const open = ref(false);
const activeName = ref('first');

import icon_order from '@/assets/rong/icon_order.png'
import icon_money from '@/assets/rong/icon_money.png'
import icon_monthly from '@/assets/rong/icon_monthly.png'
import icon_today from '@/assets/rong/icon_today.png'

const data = reactive({

    tablist: [
        {
            imgurl: icon_order,
            title: '总申请额',
            price: '0',
            text: '亿',
            showtext: true
        },
        {
            imgurl: icon_money,
            title: '总放款额',
            price: '0',
            text: '亿',
            showtext: true
        },
        {
            imgurl: icon_monthly,
            title: '本月放款总额',
            price: '0',
            text: '亿',
            showtext: false
        },
        {
            imgurl: icon_today,
            title: '今日放款总额',
            price: '0',
            text: '亿',
            showtext: false
        }
    ],

    paydata: {
        list: [],
        loading: true,
        total: 0,
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            orderNo: ''
        }
    },
    orderdata: {
        list: [],
        loading: true,
        total: 0,
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            orderNo: ''
        }
    },
    productTypeArr: [],
    form: {}, // 基本详情
    Rule: {},

});

const { queryParams, form, tablist, Rule, orderdata, paydata, productTypeArr } = toRefs(data);

/** 查询公司信息列表 */



function getorderList() {
    orderdata.value.loading = true;
    orderList(orderdata.value.queryParams).then(response => {
        orderdata.value.list = response.rows;
        orderdata.value.total = Number(response.total);
        orderdata.value.loading = false;
    });
}

function getOrderPayList() {
    paydata.value.loading = true;
    OrderPayList(paydata.value.queryParams).then(response => {
        paydata.value.list = response.rows;
        paydata.value.total = Number(response.total);
        paydata.value.loading = false;
    });
}

function getList() {
    getorderList()
    getOrderPayList()
}

/** 搜索按钮操作 */
function handleQuery() {
    if (activeName.value == "first") {
        orderdata.value.queryParams.pageNum = 1;
        getorderList()
    } else if (activeName.value == "second") {
        paydata.value.queryParams.pageNum = 1;
        getOrderPayList()
    }
}


function getPublicList() {
    // 开业状态
    publicList({
        pageNum: 1,
        pageSize: 200,
        dictType: 'product_type',
    }).then(response => {
        var data = response.rows;
        productTypeArr.value = data;
    });
}

/** 重置按钮操作 */
function resetQuery() {


    if (activeName.value == "first") {
        proxy.resetForm("firstRef");
    } else if (activeName.value == "second") {
        proxy.resetForm("secondRef");
    }

    handleQuery();

}



/** 详情 */
function handleUpdate(row) {
    reset();
    const orderNo = row.orderNo;
    orderDetail(orderNo).then(response => {
        form.value = response.data;
        open.value = true;
    });
}


// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

// 表单重置
function reset() {
    form.value = {}
}


function tabsChange(e) {
    console.log(e)
}


/** 导出按钮操作 */
function handleExport() {
    proxy.download('system/loan/export', {
        ...queryParams.value
    }, `loan_${new Date().getTime()}.xlsx`)
}
getPublicList()
getList();
</script>

<style lang="scss">
.four-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .four-item {
        width: calc((100% - 30px) / 4);
        height: 112px;
        background: #FFF5EF;
        border-radius: 16px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:nth-child(4n) {
            margin-right: 0;
        }

        .four-img {
            width: 68px;
            height: 68px;
            display: block;
            flex-shrink: 0;
            margin-right: 14px;
        }

        .four-cont {
            line-height: 1;

            .four-tt {
                color: #333333;
                font-size: 12px;

                .big1 {
                    font-weight: 550;
                    color: #FF7C2F;
                    font-size: 28px;
                    padding-right: 2px;
                }

                .big2 {
                    color: #FF7C2F;
                    font-size: 14px;
                    padding-right: 2px;
                }
            }

            .four-dd {
                color: #666666;
                font-size: 12px;
                margin-top: 6px;
            }
        }
    }
}

.search-form {
    margin-top: 20px;

    .search-vitem {
        width: 230px !important;
    }

    .showline {
        width: 100%;
        height: 8px;
        background: #f4f7fc;
        margin-bottom: 25px;
        margin-top: 10px;
    }



    .checkbox-list {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .checkbox-item {
            width: 50%;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
    }

    .showtext {
        width: 100%;
        font-size: 14px;
        margin-bottom: 15px;

        span {
            font-weight: 550;
            color: #FF6201;
        }
    }
}

.el-dialog__body {
    background: #f5f9ff !important;
    padding: 20px;
}

.dialog-custom {
    width: 100%;

    .dialog-main {
        width: 100%;

        .dialog-item {
            width: 100%;
            border-radius: 10px;
            background: #FFFFFF;
            overflow: hidden;


            &:not(:first-child) {
                margin-top: 20px;
            }

            .dialog-tbox {
                width: 100%;
                height: 48px;
                padding: 0 40px;
                font-size: 16px;
                font-weight: 550;
                border-bottom: 1px solid #e4efff;
                display: flex;
                align-items: center;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    left: 20px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 3px;
                    height: 14px;
                    background: #FF6201;
                }

                .tips {
                    font-size: 12px;
                    padding-left: 14px;
                    color: red;
                    font-weight: normal;
                }
            }

            .dialog-cont {
                width: 100%;
                padding: 30px;
                box-sizing: border-box;
            }

            .vtip {
                padding: 5px 10px;
                font-size: 12px;
                color: #fab01c;
                line-height: 18px;
                display: flex;
                align-items: center;

                &:first-child {
                    margin-top: 20px;
                }

                span {
                    padding-left: 5px;
                }
            }

            .search-fitem {
                width: 100%;

                &.v70 {
                    width: 63.5%;
                }

                &.v50 {
                    width: 45%;
                }
            }

            .showtips {
                padding-left: 140px;
                font-size: 14px;
                color: red;
            }

            .file-box {
                width: 100%;
                margin-top: 20px;

                .file-title {
                    padding-left: 16px;
                    position: relative;
                    font-size: 16px;
                    font-weight: 550;
                    line-height: 1;

                    &:after {
                        content: '';
                        width: 3px;
                        height: 100%;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        left: 0;
                        background: #FF6201;
                    }
                }

                .file-cont {
                    margin-top: 20px;
                }
            }

            .step {
                display: flex;
                width: 100%;
                background: #f6faff;
                margin-bottom: 60px;

                .step-item {
                    position: relative;
                    padding: 15px 30px;
                    background: #f6faff;

                    .content {
                        color: #50565d;
                        width: 250px;

                        div {
                            margin-block: 5px;
                        }
                    }

                    .bottom {
                        position: absolute;
                        bottom: -35px;
                        width: 100%;

                        .text {
                            position: absolute;
                            top: 25px;
                            left: -13px;
                            width: 50px;
                            text-align: center;
                        }

                        .round {
                            width: 24px;
                            height: 24px;
                            background-color: #FF6201;
                            border-radius: 50%;
                        }

                        .line {
                            display: inline-block;
                            width: 100%;
                            height: 4px;
                            background-color: #FF6201;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            margin-right: 15px;
                        }
                    }
                }
            }

        }
    }


    .el-form-item {
        width: 30%;

        &.vvv2 {
            width: 35%;
        }

        .search-vitem {
            width: 220px !important;

            &.v70 {
                width: 58% !important;
            }

            &.v100 {
                width: 100% !important;
            }
        }
    }

}
</style>
